<template>
  <div>
    <el-dialog v-model="deleteSchoolDialogVisible" title="提示" width="30%">
      确定要删除吗？
      <template #footer>
          <span class="dialog-footer">
            <el-button @click="deleteSchoolDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="confirmSchoolDeletion">确 定</el-button>
          </span>
      </template>
    </el-dialog>
    <el-dialog v-model="addSchoolDialogVisible" title="提示" width="30%">
      <el-form-item label="学院编号">
        <el-input style="width: 70%" placeholder="请输入要添加的学院的编号" v-model="schoolToBeAdded.schoolId"></el-input>
      </el-form-item>
      <el-form-item label="学院名称">
        <el-input style="width: 70%" v-model="schoolToBeAdded.schoolName"></el-input>
      </el-form-item>
      <template #footer>
          <span class="dialog-footer">
            <el-button @click="addSchoolDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="confirmSchoolAddition">确 定</el-button>
          </span>
      </template>
    </el-dialog>
    <el-dialog v-model="addMajorDialogVisible" title="提示" width="30%">
      <el-form-item label="所属学院">
        <el-select
            v-model="majorData.schoolId"
            placeholder="请选择所属学院">
          <el-option v-for="item in schoolList"
                     :key="item.schoolId"
                     :label="item.schoolName"
                     :value="item.schoolId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="专业编号">
        <el-input  v-model="majorData.majorId"></el-input>
      </el-form-item>
      <el-form-item label="专业名称">
        <el-input  v-model="majorData.majorName"></el-input>
      </el-form-item>
      <template #footer>
          <span class="dialog-footer">
            <el-button @click="addMajorDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="confirmMajorAddition">确 定</el-button>
          </span>
      </template>
    </el-dialog>
    <div style="margin: 10px 0">
      <el-button type="primary" @click="addSchool">添加学院</el-button>
      <el-input v-model="keyword" placeholder="请输入关键字" style="width: 20%" clearable/>
      <el-button type="primary" style="margin-left: 5px" @click="searchInfo">查询</el-button>
      <el-button type="primary" @click="searchMode=false;this.load()" v-if="searchMode">取消</el-button>
    </div>
    <el-table :data="schoolFound" border style="width: 100%" stripe>
      <el-table-column prop="schoolName" label="学院"/>
      <el-table-column fixed="right" label="操作" width="120">
        <template #default="scope">
          <el-popconfirm title="确定删除此学院？" @confirm="deleteSchool(scope.row.schoolId)">
            <template #reference>
              <el-button type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin: 10px 0">
      <el-button type="primary" @click="addMajor">添加专业</el-button>
<!--/*      <el-input v-model="keyword" placeholder="请输入关键字" style="width: 20%" clearable/>*/-->
<!--      <el-button type="primary" style="margin-left: 5px" @click="searchInfo">查询</el-button>-->
      <el-button type="primary" @click="searchMode=false;this.load()" v-if="searchMode">取消</el-button>
    </div>
    <el-table :data="majorFound" border style="width: 100%" stripe>
      <el-table-column prop="majorName" label="专业"/>
      <el-table-column prop="schoolName" label="所属学院"/>
      <el-table-column fixed="right" label="操作" width="120">
        <template #default="scope">
          <el-popconfirm title="确定删除此专业？" @confirm="deleteMajor(scope.row.majorId)">
            <template #reference>
              <el-button type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "CollegeSchool",
  components: {},
  data() {
    return {
      schoolList: [
        {
          label: '计算机学院',
          schoolId: 1,
        },
        {
          label: '摸鱼学院',
          schoolId: 2,
        }
      ],
      activeNames: [],
      activatedTables: [],
      //添加学院
      addSchoolDialogVisible: false,
      schoolToBeAdded: {},
      //删除学院
      deleteSchoolDialogVisible: false,
      schoolToBeDeleted: null,
      //添加专业
      addMajorDialogVisible: false,
      majorToBeAdded: null,
      schoolToAddIn: null,
      //搜索
      searchMode: false,
      keyword: '',
      majorFound: [],
      schoolFound: [],
      majorData:{}
    }
  },
  created() {
    this.load()
    this.activeNames = []
  },
  methods: {

    load() {
      this.searchInfo()
      this.getSchoolList()
      this.activeNames = [];
      this.activatedTables = []
    },
    getSchoolList() {
      //DONE:需要补充这里的url
      request.get("http://124.70.179.188:8082/school/").then(res => {
        this.schoolList = res.data
      })
    },
    findResByName(schoolId) {
      //如果找得到名字，就使用该名字对应的专业表格；否则导入新的
      let item = this.activatedTables.find(element => element.schoolId === schoolId)
      if (item !== undefined) {
        return item.data
      } else {
        let newTable = {
          schoolId: schoolId,
          data: null
        }
        //TODO:需要补充这里的url
        request.get("http://localhost:8082/dpt/majorList?schoolId=" + newTable.schoolId).then(res => {
          if (res.code === 0) {
            newTable.data = res.data.data
          }
        })
        this.activatedTables.push(newTable)
        return newTable.data

      }
    },
    //学院增删
    addSchool() {
      this.addSchoolDialogVisible = true
    },
    confirmSchoolAddition() {
      request.post("http://localhost:8082/school", this.schoolToBeAdded).then(res => {
        // 判断是否返回成功，若失败给出失败的信息
        if (res.code === 0) {
          this.$message({
            type: "success",
            message: "添加成功"
          })
        } else {
          this.$message({
            type: "error",
            message: res.msg
          })
        }
        this.addSchoolDialogVisible = false
        this.load()
      })
    },
    deleteSchool(schoolId) {
      request.delete("http://localhost:8082/school/" + schoolId).then(res => {
        // 判断是否返回成功，若失败给出失败的信息
        if (res.code === 0) {
          this.$message({
            type: "success",
            message: "删除成功"
          })
        } else {
          this.$message({
            type: "error",
            message: res.msg
          })
        }
        this.load() // 删除后重新加载表格数据
      })
    },
    confirmSchoolDeletion() {
      request.delete("http://localhost:8082/dpt/delSchool/" + this.schoolToBeDeleted).then(res => {
        // 判断是否返回成功，若失败给出失败的信息
        if (res.code === 0) {
          this.$message({
            type: "success",
            message: "删除成功"
          })
        } else {
          this.$message({
            type: "error",
            message: res.msg
          })
        }
        this.load()
      })
    },
    //专业增删
    addMajor(schoolId) {
      this.addMajorDialogVisible = true
    },
    confirmMajorAddition() {
      request.post("http://localhost:8082/major", this.majorData).then(res => {
        // 判断是否返回成功，若失败给出失败的信息
        if (res.code === 0) {
          this.$message({
            type: "success",
            message: "添加成功"
          })
        } else {
          this.$message({
            type: "error",
            message: res.msg
          })
        }
        this.addMajorDialogVisible = false
        this.load()
      })
    },
    deleteMajor(majorId) {
      request.delete("http://localhost:8082/major/" + majorId).then(res => {
        // 判断是否返回成功，若失败给出失败的信息
        if (res.code === 0) {
          this.$message({
            type: "success",
            message: "删除成功"
          })
        } else {
          this.$message({
            type: "error",
            message: res.msg
          })
        }
        this.load()
        // 删除后，若能异步刷新所在学院的数据会更好，但还没想好怎么实现
      })
    },
    //搜索
    searchInfo() {
      this.searchMode = true
      let encodedKey = encodeURI(encodeURI(this.keyword))
      request.get("http://124.70.179.188:8082/major?keyword=" + encodedKey).then(res => {
            this.majorFound = res.data
          }
      )
      request.get("http://124.70.179.188:8082/school?keyword=" + encodedKey).then(res => {
        this.schoolFound = res.data
      })
    }
  }
}
</script>

<style scoped>

</style>